<title>Regist</title>

  <link rel="stylesheet" href="src/css/file.css">
<link rel="stylesheet" href="src/js/sweetalert/sweetalert.css">

  <style>
    body{
      background-image:url(/src/image/bg-3.jpg);
    }
  </style>
<div style="margin-top: -70px;">
    <a id="back-btn" onClick="javascript:history.back(1)" style="font-size: 1.2em; margin: 0 20px; margin-top: 0px; ">返回</a>
    <a  ui-sref="home" style="font-size: 1.2em; margin: 0 20px;">ceat</a>
    <a  ui-sref="login" style="font-size: 1.2em; margin: 0 20px;">Login</a>
</div>
<div class="container" style="margin-top:0px" >


  <form align="center" id="registForm" ng-controller="registController as vm" enctype='multipart/form-data' style="margin-top: -20px;">
    <h1>
      <font color="white" style="margin-right: 50px">Regist</font>
    </h1>
    <div class="clearfix" style="margin-bottom: 20px;"></div>
    <div class="row">
      <div class="col-md-6 col-md-offset-3">
        <input type="text" name="customerId" class="form-control" ng-model="customerId"  placeholder="Id" required >
      </div>
    </div>
    <div class="clearfix" style="margin-bottom: 20px;"></div>
    <div class="row">
      <div class="col-md-6 col-md-offset-3">
        <input type="password" name="password" class="form-control"  placeholder="Password" required>
      </div>
    </div>
    <div class="clearfix" style="margin-bottom: 20px;"></div>
    <div class="row">
      <div class="col-md-6 col-md-offset-3">
        <input type="text" class="form-control" placeholder="Nick name" name="nickName" required>
      </div>
    </div>
    <div class="clearfix" style="margin-bottom: 20px;"></div>
    <div class="row">
      <div class="col-md-6 col-md-offset-3">
        <input type="number" name="phone" class="form-control"  placeholder="Phone number" required>
      </div>
    </div>
    <div class="clearfix" style="margin-bottom: 10px;"></div>

    <div class="row">
      <div class="col-md-6 col-md-offset-3">
        <input type="text" name="address" class="form-control"  placeholder="Address" required>
      </div>
    </div>
    <div class="clearfix" style="margin-bottom: 10px;"></div>
    <div>
      <div class="col-md-12" style="margin-left: 0px;" >
        <div class="uploader white">
          <input type="text" class="filename"/>
          <input type="button" name="file" class="button" value="Browse Image"/>
          <input type="file" name="img" id="img" size="30" style="margin-left: 300px; width:350px" />
        </div>
      </div>
    </div>

    <div class="clearfix" style="margin-bottom: 10px;"></div>
    <div class="row" style="margin-left: 0px;">
      <div class="col-md-12">
        <button ng-click="vm.regist()" id='regist' class="btn btn-success" style="margin-left: 0px; width:100px">Regist</button>
      </div>
    </div>
      <div class="error">
          <span></span>
      </div>
      <!--<br>-->
      <!--<a  ui-sref="login" style="margin-left: 10px;">Sign in here</a>-->
  </form>

</div>

<script src="../../../src/js/jquery-3.2.1.min.js"></script>
<script src="../../../src/js/sweetalert/SweetAlert.min.js"></script>
<script src="../../../src/js/sweetalert/SweetAlert.js"></script>
<script src="../../../src/js/sweetalert/sweetalert.min.js"></script>
<script src="../../../src/js/sweetalert/sweet-alert.js"></script>

<script>
    $(function() {
        $("input[type=file]").change(function () {
            $(this).parents(".uploader").find(".filename").val($(this).val());
        });
        $("input[type=file]").each(
            function () {
                if ($(this).val() == "") {
                    $(this).parents(".uploader").find(".filename").val(
                        "No file selected...");
                }
            });
    });
    $(function() {
        $('.container form').submit(function(){
            var id = $(this).find('input[name=customerId]').val();
            var password = $(this).find('input[name=password]').val();
            var nickName = $(this).find('input[name=nickName]').val();
            var phone = $(this).find('input[name=phone]').val();
            var address = $(this).find('input[name=sddress]').val();
            if(id=='' || password=='' || nickName=='' || phone=='' || address ==''){
                $('.error').text('invalid input');
                  alert('error');
            }
            if(id == '') {
                $(this).find('.error').fadeOut('fast', function(){
                    $(this).css('top', '27px');
                });
                $(this).find('.error').fadeIn('fast', function(){
                    $(this).parent().find('input[name=customerId]').focus();
                });
                return false;
            }
            if(password == '') {
                $(this).find('.error').fadeOut('fast', function(){
                    $(this).css('top', '96px');
                });
                $(this).find('.error').fadeIn('fast', function(){
                    $(this).parent().find('input[name=password]').focus();
                });
                return false;
            }
        });
        $('.container form .name, .container form .password').keyup(function(){
            $(this).parent().find('.error').fadeOut('fast');
        });
    });

</script>

